import { useParams, useNavigate } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import { apigetDetail, apigetList } from '../api'


const Detail = () => {

    const params = useParams()

    const [current, setCurrent] = useState(1)

    const [detail, setDetail]: [{ img?: string, name?: string }, any] = useState({})

    const [list, setList] = useState([])

    const [id, setId]: [number | null, any] = useState(null)

    const navigate = useNavigate()

    useEffect(() => {


        // 右侧列表
        getList()
    }, [])

    useEffect(() => {
        // 详情 
        getDetail()
    }, [id])

    const getList = () => {
        apigetList({ current }).then(res => {
            // 右侧列表赋值
            setList(res.data)
        })
    }


    const getDetail = () => {
        apigetDetail({ id: id || params.id as string }).then(res => {
            // 详情数据赋值
            setDetail(res.data)
        })
    }

    const changeDetail = (id: number) => {
        setId(id)
    }

    return <div className="detail-box">
        <div className="big-view">
            <img src={detail.img} alt="" />
            <p>{detail.name}</p>
        </div>
        <div className="list">
            {
                list.length && list.map((item: { img: string, name: string, id: number }, idx) => {
                    return <div onClick={() => changeDetail(item.id)} key={idx} className="list-item">
                        <img src={item.img} alt="" />
                        <p>{item.name}</p>
                    </div>
                })
            }
        </div>
    </div>
}

export default Detail